<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>操作帮助 - 食物食材食品基本信息Web系统</title>
  <link rel="stylesheet" href="css/style.css">
  <script>
    if (!sessionStorage.getItem('isLoggedIn')) {
      window.location.href = 'login.html';
    }
  </script>
  <style>
    .help-section { background: #fff; border-radius: 8px; padding: 20px; margin: 20px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    .help-nav { display: flex; border-bottom: 2px solid #ddd; margin-bottom: 20px; }
    .help-nav-item { padding: 10px 20px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; }
    .help-nav-item.active { border-bottom-color: #388e3c; color: #388e3c; font-weight: bold; }
    .help-content { display: none; } .help-content.active { display: block; }
    .faq-item { margin: 15px 0; padding: 15px; border: 1px solid #e0e0e0; border-radius: 5px; }
    .faq-question { font-weight: bold; color: #388e3c; margin-bottom: 10px; }
    .faq-answer { color: #666; line-height: 1.6; }
    .step-list { list-style: none; padding: 0; }
    .step-list li { margin: 10px 0; padding: 10px; background: #f9f9f9; border-radius: 5px; }
    .step-number { display: inline-block; width: 25px; height: 25px; background: #388e3c; color: white; text-align: center; border-radius: 50%; margin-right: 10px; }
    .help-welcome {
      font-size: 22px;
      font-weight: bold;
      color: #2e7d32;
      margin-bottom: 18px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div class="bg"></div>
  <div class="bg bg2"></div>
  <div class="bg bg3"></div>
  <header>
    <h1>食物食材食品基本信息Web系统</h1>
    <nav>
      <div class="user-menu" id="userMenu">
        <img src="img/avatar.png" alt="头像" class="avatar" id="userAvatar">
        <span class="username" id="usernameDisplay">用户</span>
        <span class="dropdown-arrow">&#9662;</span>
        <div class="dropdown-menu" id="dropdownMenu">
          <a href="#" id="profileLink"><span class="menu-icon">&#8962;</span> 个人空间</a>
          <a href="login.html" id="logout"><span class="menu-icon">&#9906;</span> 退出登录</a>
        </div>
      </div>
    </nav>
  </header>
  <main>
    <a href="index.html" class="back-home-btn"><span>返回首页</span></a>
    <section>
      <h2>操作帮助</h2>
      <p class="help-welcome">欢迎使用食物食材食品基本信息Web系统，本页面提供详细的使用指南和常见问题解答。</p>
      
      <div class="help-nav">
        <div class="help-nav-item active" onclick="showHelp('guide')">使用指南</div>
        <div class="help-nav-item" onclick="showHelp('faq')">常见问题</div>
        <div class="help-nav-item" onclick="showHelp('tips')">使用技巧</div>
      </div>
      
      <!-- 使用指南 -->
      <div id="guide" class="help-content active">
        <div class="help-section">
          <h3>用户注册与登录</h3>
          <ol class="step-list">
            <li><span class="step-number">1</span>访问注册页面，填写用户名、邮箱、密码</li>
            <li><span class="step-number">2</span>如需注册为管理员，请联系系统管理员获取密钥</li>
            <li><span class="step-number">3</span>注册成功后，使用用户名和密码登录系统</li>
            <li><span class="step-number">4</span>也可选择游客登录，体验基本功能</li>
          </ol>
        </div>
        
        <div class="help-section">
          <h3>数据录入</h3>
          <ol class="step-list">
            <li><span class="step-number">1</span>选择要添加的数据类型（食物/食材/食品）</li>
            <li><span class="step-number">2</span>填写必填字段信息</li>
            <li><span class="step-number">3</span>上传相关图片（支持jpg、png等格式）</li>
            <li><span class="step-number">4</span>点击保存按钮提交数据</li>
          </ol>
        </div>
        
        <div class="help-section">
          <h3>数据查询</h3>
          <ol class="step-list">
            <li><span class="step-number">1</span>进入查询页面</li>
            <li><span class="step-number">2</span>选择查询类型（全部/食物/食材/食品）</li>
            <li><span class="step-number">3</span>输入查询条件（名称、日期、产地等）</li>
            <li><span class="step-number">4</span>点击查询按钮获取结果</li>
            <li><span class="step-number">5</span>可下载查询结果为Excel文件</li>
          </ol>
        </div>
        
        <div class="help-section">
          <h3>批量导入</h3>
          <ol class="step-list">
            <li><span class="step-number">1</span>准备Excel文件，包含所需字段</li>
            <li><span class="step-number">2</span>选择要导入的表类型</li>
            <li><span class="step-number">3</span>上传Excel文件</li>
            <li><span class="step-number">4</span>系统自动解析并导入数据</li>
          </ol>
        </div>
        
        <div class="help-section">
          <h3>建议反馈</h3>
          <ol class="step-list">
            <li><span class="step-number">1</span>选择建议类型和紧急程度</li>
            <li><span class="step-number">2</span>填写建议标题和详细描述</li>
            <li><span class="step-number">3</span>可选择填写联系方式</li>
            <li><span class="step-number">4</span>提交建议，管理员会及时处理</li>
          </ol>
        </div>
      </div>
      
      <!-- 常见问题 -->
      <div id="faq" class="help-content">
        <div class="help-section">
          <div class="faq-item">
            <div class="faq-question">Q: 如何成为管理员？</div>
            <div class="faq-answer">A: 请联系系统管理员获取相关权限。</div>
          </div>
          
          <div class="faq-item">
            <div class="faq-question">Q: 忘记密码怎么办？</div>
            <div class="faq-answer">A: 请联系系统管理员重置密码，或重新注册新账号。</div>
          </div>
          
          <div class="faq-item">
            <div class="faq-question">Q: 图片上传失败怎么办？</div>
            <div class="faq-answer">A: 请确保图片格式为jpg、png、gif等常见格式，文件大小不超过5MB。</div>
          </div>
          
          <div class="faq-item">
            <div class="faq-question">Q: 批量导入数据失败怎么办？</div>
            <div class="faq-answer">A: 请检查Excel文件格式是否正确，确保包含所有必填字段，字段名称与系统要求一致。</div>
          </div>
          
          <div class="faq-item">
            <div class="faq-question">Q: 如何导出数据？</div>
            <div class="faq-answer">A: 在查询页面查询数据后，点击"下载数据"按钮即可导出为Excel文件。</div>
          </div>
          
          <div class="faq-item">
            <div class="faq-question">Q: 游客可以做什么？</div>
            <div class="faq-answer">A: 游客可以查询所有数据、提交建议、申请成为注册用户。</div>
          </div>
          
          <div class="faq-item">
            <div class="faq-question">Q: 注册用户可以做什么？</div>
            <div class="faq-answer">A: 注册用户可以添加新数据、查询所有数据、下载数据、提交建议、批量导入数据。</div>
          </div>
          
          <div class="faq-item">
            <div class="faq-question">Q: 管理员可以做什么？</div>
            <div class="faq-answer">A: 管理员拥有所有权限，包括用户管理、表格管理、数据备份、系统维护等。</div>
          </div>
        </div>
      </div>
      
      <!-- 使用技巧 -->
      <div id="tips" class="help-content">
        <div class="help-section tips-section">
          <h3>数据录入技巧</h3>
          <ul>
            <li>使用详细的描述信息，便于后续查询和管理</li>
            <li>上传高质量图片，提升数据展示效果</li>
            <li>合理选择食材分类，便于分类查询</li>
            <li>填写准确的产地和生产单位信息</li>
          </ul>
        </div>
        
        <div class="help-section tips-section">
          <h3>查询技巧</h3>
          <ul>
            <li>使用关键词进行模糊查询</li>
            <li>结合多个条件进行精确查询</li>
            <li>利用日期范围筛选最新数据</li>
            <li>使用分类筛选特定类型数据</li>
          </ul>
        </div>
        
        <div class="help-section tips-section">
          <h3>批量导入技巧</h3>
          <ul>
            <li>使用Excel模板确保格式正确</li>
            <li>检查必填字段是否完整</li>
            <li>图片文件需要单独上传</li>
            <li>分批导入大量数据，避免超时</li>
          </ul>
        </div>
        
        <div class="help-section tips-section">
          <h3>系统使用技巧</h3>
          <ul>
            <li>定期备份重要数据</li>
            <li>及时提交建议反馈</li>
            <li>关注系统更新和通知</li>
            <li>合理使用权限，保护数据安全</li>
          </ul>
        </div>
      </div>
      <style>
        .tips-section {
          background: #e8f5e9;
          border-radius: 14px;
          box-shadow: 0 2px 12px 0 rgba(56, 142, 60, 0.08);
          border: 1.5px solid #b2dfdb;
          margin-bottom: 32px;
        }
        .tips-section h3 {
          color: #388e3c;
          font-size: 1.5rem;
          font-weight: bold;
          margin-bottom: 12px;
        }
        .tips-section ul {
          padding-left: 28px;
          list-style: none;
        }
        .tips-section ul li {
          font-size: 1.18rem;
          color: #2e7d32;
          margin-bottom: 10px;
          position: relative;
        }
        .tips-section ul li::before {
          content: '';
          display: inline-block;
          width: 10px;
          height: 10px;
          background: #66bb6a;
          border-radius: 50%;
          margin-right: 12px;
          position: relative;
          top: -1px;
        }
      </style>
  </main>
  <footer>
    <p>&copy; 2025 食物食材食品基本信息Web系统</p>
  </footer>
  <script src="js/user_menu.js"></script>
  <script>
    function showHelp(helpType) {
      document.querySelectorAll('.help-content').forEach(content => content.classList.remove('active'));
      document.querySelectorAll('.help-nav-item').forEach(item => item.classList.remove('active'));
      document.getElementById(helpType).classList.add('active');
      event.target.classList.add('active');
    }
  </script>
</body>
</html> 